<template>
  <div style="width: 100%;padding-top:14px">
    <div class="document-right-header">
      <div class="document-right-header-left">
        <el-input size="medium" class="document-right-header-left-input" suffix-icon="el-icon-search" placeholder="搜索文档"
                  v-model="listQuery.name" @change="queryClick"></el-input>
      </div>
      <div class="document-right-header-right">
        <div class="document-right-header-right-switch">
          <div :class="[switchType == 'row'?'switch-bg':'']" class="document-right-header-right-switch-item"
               @click="loadSwitch('row')">
            <!-- <i :class="[switchType == 'row'?'':'switch-color']" class="iconfont icon-hang document-right-header-right-switch-item-title"></i> -->
            <span :class="[switchType == 'row'?'':'switch-color']"
                  class="document-right-header-right-switch-item-title">行</span>
          </div>
          <div :class="[switchType == 'column'?'switch-bg':'']" class="document-right-header-right-switch-itemTwo"
               @click="loadSwitch('column')">
            <!-- <i :class="[switchType == 'column'?'':'switch-color']" class="iconfont icon-lietu document-right-header-right-switch-item-title"></i> -->
            <span :class="[switchType == 'column'?'':'switch-color']"
                  class="document-right-header-right-switch-item-title">列</span>
          </div>


        </div>
        <!-- <div>
          <singlefileUpload style="width:100px" ref="upload" @uploadSave="uploadSave" @returnUrl="returnUrl"
                            @uploadListShow="uploadListShow">
            <template v-slot:openDialog>
              <div style="display: flex;flex-direction: column;">
                <el-button style="width: 100px;" plain>上传附件</el-button>
              </div>
            </template>
          </singlefileUpload>
        </div> -->
      </div>
    </div>
    <div style="position: relative;">
      <div class="document-right-content" style="margin-bottom: 30px;" v-if="switchType == 'row'">
        <row style="flex: 1;" :functionIndex="functionIndex" :data='documentForm' :listQuery="listQuery"></row>
      </div>
      <div class="document-right-content" v-if="switchType == 'column'">
        <div v-for="(item,index) in documentForm">
          <column class="document-right-content-column" :functionIndex="functionIndex" :listQuery="listQuery"
                  :item="item" :key="index">
          </column>
        </div>
        <div v-if="documentForm.length == 0" style="flex: 1;display: flex;justify-content: center;align-items: center;">
          <el-empty description="暂无数据"></el-empty>
        </div>
      </div>
    </div>
    <div>
      <pagination v-show="total>0" :total="total" :current.sync="listQuery.current" :size.sync="listQuery.size"
                  @pagination="loadList"/>
    </div>
    <uploadList style="z-index: 99999;" v-if="uploadForm.length > 0 && uploadListType == true" :uploadForm="uploadForm"
                @uploadListDel="uploadListDel"></uploadList>
    <!-- 新建文件夹 -->
    <!-- <folder ref="folder" @updateTree="updateTree"></folder> -->
  </div>
</template>

<script>
import {list} from "@/api/doc.js";
import Vue from "vue";
import column from "./column.vue";
import row from "./row.vue";
import pagination from "@/components/Pagination/index.vue";
import singlefileUpload from "../../../../components/upload/singlefileUpload";
import {save} from "@/api/doc.js";
import uploadList from "@/components/upload/uploadList.vue";

export default {
  data() {
    return {
      projectform: "",
      documentType: "全部类型",
      switchType: "column",
      documentForm: [],
      listQuery: {
        current: 1,
        size: 20,
        docType: "10",
        // dirId:'',
        deleted: 0,
        isUpdate: 0,
        isMyCreate: 0,
        name: "",
        docTypeId: "",
      },
      keyWord: {},
      docForm: {
        name: "",
        docFilePath: [],
        status: "00",
        docType: "10",
        dirId: "",
      },
      uploadForm: [],
      total: 0,
      functionIndex: 0,
      uploadListType: false,
      value: "projDoc",
    };
  },
  components: {
    column,
    row,
    pagination,
    singlefileUpload,
    uploadList,
  },
  created() {
    this.projectform = this.form;
    this.listQuery.docTypeId = this.$route.query.id;
    this.loadList();
    // 修改更新list列表
    this.$EventBus.$on("updateDoc", (data) => {
      var _this = this;
      console.log(data);
      console.log("我进来了");
      if (
          data.type == "del" ||
          data.type == "move" ||
          data.type == "removeIsMark" ||
          data.type == "recovery"
      ) {
        _this.documentForm.forEach(function (item, index) {
          if (item.docId == data.data.docId) {
            _this.documentForm.splice(index, 1);
            _this.$forceUpdate();
            console.log(_this.documentForm);
          }
        });
      } else if (data.type == "update") {
        _this.documentForm.forEach(function (item, index) {
          if (item.docId == data.data.docId) {
            _this.documentForm[index] = data.data;
            _this.$forceUpdate();
          }
        });
      }
    });
  },
  beforeDestroy() {
    this.$EventBus.$off("updateDoc");
  },
  props: ["form"],
  watch: {
    form: {
      handler(val, oldval) {
        this.projectform = val;
      },
      // 深度观察监听
      deep: true,
      immediate: true,
    },
  },
  methods: {
    uploadSave(val) {
      let _this = this;
      _this.docForm.docFilePath = _this.uploadForm;
      this.docForm.dirId = _this.projectform.dirId;
      this.docForm.docTypeId = this.$route.query.id;
      // this.docForm.name = this.uploadForm[0].fileName;

      save(this.docForm).then((res) => {
        this.documentForm.push(res.data);
        _this.$refs.upload.sucessClick();
        this.loadList();
      });
    },
    uploadListShow(data) {
      this.uploadForm = this.docForm.docFilePath;
      this.uploadListType = data;
    },
    returnUrl(data) {
      var docFilePath = {
        fileName: data.name,
        fileUrl: data.url,
      };
      this.uploadForm.push(docFilePath);
    },
    uploadListDel(data) {
      this.uploadForm.splice(data, 1);
    },
    // uploadSave(val){
    // 		let _this = this
    // 		let data = {
    // 			 docFilePath:[{fileNmae:val.name,fileUrl:val.url}],
    //  			 name:val.name,
    // 			docType:'00',
    // 			dirId:_this.projectform.dirId,
    // 			docTypeId:this.$route.query.id,
    // 			status:'00'
    // 		}
    // 		save(data).then(res=>{
    // 			console.log(data)
    // 			this.documentForm.push(res.data)
    // 			_this.$refs.upload.sucessClick()
    // 		})
    // 	},

    // 刷新树
    updateTree(data) {
      console.log(data);
      this.$EventBus.$emit("eventName", data);
    },
    // 查询list
    loadList() {
      let _this = this
      list(_this.listQuery).then((res) => {
        console.log(res);
        _this.documentForm = res.data.docData;
        _this.total = res.data.docData.length;
      });
    },
    // 切换列表排列方式
    loadSwitch(data) {
      this.switchType = data;
    },
    loadFolder(data) {
      this.$refs.folder.loadFolder(data);
    },
    // 名字搜索
    queryClick(data) {
      console.log(data);
      this.resetClick();
      this.listQuery.name = data;
      this.loadList();
    },
    // 重置listquery
    resetClick() {
      this.functionIndex = 0;
      this.listQuery.deleted = 0;
      this.listQuery.isUpdate = 0;
      this.listQuery.isMyCreate = 0;
      this.listQuery.current = 1;
      this.listQuery.size = 10;
      this.listQuery.docType = "";
      this.listQuery.dirId = "";
      this.listQuery.name = "";
    },
    selectClick() {
      this.loadList();
    },
  },
};
</script>

<style scoped>
.document-right-header {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.document-right-header-left {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.document-right-header-left-select {
  width: 160px;
  margin-right: 10px;
}

.document-right-header-left-input {
  width: 220px;
}

.document-right-header-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 14px;
}

.document-right-header-right-switch {
  width: 72px;
  height: 36px;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
  margin-right: 20px;
}

.document-right-header-right-switch-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #dadee3;
  border-right: none;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.document-right-header-right-switch-itemTwo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #dadee3;
  border-left: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.switch-bg {
  background-color: #677e9f;
  border-color: #677e9f;
}

.switch-color {
  color: #677e9f !important;
}

.document-right-header-right-switch-item-title {
  font-size: 14px;
  color: white;
}

.popover-content-top-title {
  color: #2e405e;
  font-size: 14px;
  display: block;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.popover-content-top-title:hover {
  background-color: #f5f6f8;
}

.document-right-content {
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 20px;
}

.document-right-content-column {
  margin-bottom: 20px;
  margin-right: 20px;
}

.popover-content-top-title {
  background-color: rgb(44, 126, 248);
  color: #fff;
  border-radius: 8px;
}

.popover-content-top-title:hover {
  background-color: rgb(44, 126, 248);
  color: #fff;
  border-radius: 8px;
}
</style>
